<template>
    <div class="object-node">
        <base-node :pname="pname" :multiline="true">
            <template #begin>
                <span style="color:#722ed1;margin-right: 0.5em;">object</span>
                <strong>{</strong>
            </template>
            <template #default>
                <root-node v-for="(sitem, skey) in pvalue" :pname="skey" :pvalue="sitem"></root-node>
            </template>
            <template #end>
                <strong>}</strong>
            </template>
        </base-node>
    </div>
</template>

<script lang="ts">
import _ from "lodash";
import { Component, Prop, Vue } from "vue-property-decorator";

import BaseNode from "./BaseNode.vue";
// import NodeSwitch from "./NodeSwitch.vue";
//import RootNode from "./RootNode.vue";
// import NumberNode from "@/components/ObjectCom/NumberNode.vue";
// import StringNode from "@/components/ObjectCom/StringNode.vue";
//import ObjectNode from "@/components/ObjectCom/ObjectNode.vue";
// import ArrayNode from "@/components/ObjectCom/ArrayNode.vue";

@Component({
    components: {
        BaseNode,
        // NodeSwitch,
        RootNode: () => import("./RootNode.vue")
        // NumberNode,
        // StringNode,
        // ArrayNode
    }
})
export default class StructNode extends Vue {
    @Prop() public pname!: string;
    @Prop() public pvalue!: Object;

    // public ComponentName(item: any) {
    //     if (_.isString(item)) {
    //         return "string-node";
    //     } else if (_.isNumber(item)) {
    //         return "number-node";
    //     } else if (_.isArray(item)) {
    //         return "array-node";
    //     } else if (_.isObject(item)) {
    //         return "object-node";
    //     } else {
    //         return "object-node";
    //     }
    // }
}
</script>